<template>
  <div class="flex flex-row items-center mr-4">
    <n-button
      quaternary
      class="mr-4 pl-2 pr-2 hover:(!text-blue-500 !bg-blue-200)"
      v-for="(item, index) in menus"
      :key="index"
      @click="$router.push(item.path)"
      :class="{ 'menu-item-active': $route.path == item.path }"
      >{{ item.name }}</n-button
    >
  </div>
</template>

<script setup>
import { NButton } from "naive-ui";
const menus = [
  { name: "首页", path: "/" },
  { name: "item1", path: "/about/1/2" },
  { name: "item2", path: "/about/2/3" },
  { name: "item3", path: "/about/1/1" },
];
const route = useRoute();
const router = useRouter();
console.log(route.path);
</script>

<style>
.menu-item-active {
  @apply !text-blue-500 !bg-blue-200;
}
</style>
